<!-- Created by 337547038 on 2019/7/4 0004. -->
<template>
  <div class="viewer-container" :class="{'fade-in':visible}">
    <div class="mask" @click="_closeClick"></div>
    <div class="viewer-canvas" :class="{loading:loading,an:!loading}">
      <img :src="bigImgSrc" :style="imgStyle">
    </div>
    <div class="viewer-footer">
      <div class="viewer-toolbar">
        <ul>
          <li class="viewer-zoom-in" @click="_toolbarClick('in')" title="放大"></li>
          <li class="viewer-zoom-out" @click="_toolbarClick('out')" title="缩小"></li>
          <li class="viewer-one-to-one" @click="_toolbarClick('one')" title="原图"></li>
          <li class="viewer-prev" @click="_toolbarClick('prev')" v-if="total>1" title="上一张"></li>
          <li class="viewer-next" @click="_toolbarClick('next')" v-if="total>1" title="下一张"></li>
          <li class="viewer-rotate-left" @click="_toolbarClick('left')" title="向左旋转"></li>
          <li class="viewer-rotate-right" @click="_toolbarClick('right')" title="向右旋转"></li>
        </ul>
      </div>
      <div class="viewer-navbar" v-if="total>1">
        <ul>
          <li v-for="(item,index) in imgList"
              :class="[
                `viewer-li-${index}`,
                {active: indexDefault === index}
              ]"
              @click="_imgClick(item,index)"
              :key="index"><img :src="item"></li>
        </ul>
      </div>
    </div>
    <a href="javascript:;" class="viewer-close icon-close1" @click="_closeClick"></a>
  </div>
</template>

<script>
import jQuery from '/static/js/jquery-1.11.3.min.js'

export default {
  name: 'viewer',
  data() {
    return {
      visible: false,
      imgList: [],
      indexDefault: 0,
      bigImgSrc: '',
      loading: false,
      total: 0,
      imgStyle: '',
      rotate: 0,
      zoom: 1,
      maxZoom: 3, // 最大放大倍数
      minZoom: 0.4 // 最小缩小倍数
    }
  },
  props: {},
  components: {},
  methods: {
    // 打开
    open(img, index) {
      this.loading = true
      this.visible = true
      this.indexDefault = index
      this.total = img.length
      this.imgList = [] // 清空
      this.imgStyle = ''
      this.bigImgSrc = ''
      this.zoom = 1
      this.rotate = 0
      // 存在data-src地址的，优先取
      let imgSrc = img[index].src
      const dataSrc = img[index].dataset.src
      if (dataSrc && dataSrc !== 'undefined') {
        imgSrc = dataSrc
      }
      const originSrc = img[index].dataset.origin
      if (originSrc && originSrc !== 'undefined') {
        imgSrc = originSrc // 当列表是缩略图时，viewer设置origin原图
      }
      this._imgLoad(imgSrc, (src) => {
        this.bigImgSrc = src
        this.loading = false
      })
      for (let i = 0; i < img.length; i++) {
        let imgSrc2 = img[i].src
        const dataSrc2 = img[i].dataset.src
        if (dataSrc2 && dataSrc2 !== 'undefined') {
          imgSrc2 = dataSrc2
        }
        this.imgList.push(imgSrc2)
      }
      /* img.forEach(item => {
        this.imgList.push(item.dataset.src || item.src)
      }) */
    },
    // 关闭
    close() {
      this.visible = false
      setTimeout(() => {
        const viewerContainer = document.querySelector('.viewer-container')
        if (viewerContainer) {
          document.body.removeChild(viewerContainer)
        }
      }, 500)
    },
    // 底部缩略图点击
    _imgClick(item, index) {
      this.loading = true
      this.indexDefault = index
      this.zoom = 1
      this._imgLoad(item, (src) => {
        this.bigImgSrc = src
        this.loading = false
        this.imgStyle = {
          transform: 'rotate(0deg)',
          transition: 'all 0s'
        }
      })
      this.scrollAnimate()
    },
    // 功能按钮点击
    _toolbarClick(type) {
      if (type === 'prev') {
        this.zoom = 1
        this.rotate = 0
        if (this.indexDefault > 0) {
          this.loading = true
          this.indexDefault--
          this._imgLoad(this.imgList[this.indexDefault], (src) => {
            this.bigImgSrc = src
            this.loading = false
          })
          this.imgStyle = {
            transform: 'rotate(0deg)',
            transition: 'all 0s'
          }
          this.scrollAnimate()
        }
      }
      if (type === 'next') {
        this.zoom = 1
        this.rotate = 0
        if (this.indexDefault < this.total - 1) {
          this.loading = true
          this.indexDefault++
          this._imgLoad(this.imgList[this.indexDefault], (src) => {
            this.bigImgSrc = src
            this.loading = false
          })
          this.imgStyle = {
            transform: 'rotate(0deg)',
            transition: 'all 0s'
          }
          this.scrollAnimate()
        }
      }
      if (type === 'left') {
        this.rotate = this.rotate - 90
        this.imgStyle = {
          transform: `rotate(${this.rotate}deg) scale(${this.zoom})`,
          transition: 'all .3s'
        }
      }
      if (type === 'right') {
        this.rotate = this.rotate + 90
        this.imgStyle = {
          transform: `rotate(${this.rotate}deg) scale(${this.zoom})`,
          transition: 'all .3s'
        }
      }
      if (type === 'in') {
        if (this.zoom > this.maxZoom) {
          return
        } else {
          this.zoom = this.zoom + 0.1
          this.imgStyle = {
            transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,
            transition: 'all .3s'
          }
        }
      }
      if (type === 'out') {
        if (this.zoom < this.minZoom) {
          return
        } else {
          this.zoom = this.zoom - 0.1
          this.imgStyle = {
            transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,
            transition: 'all .3s'
          }
        }
      }
      if (type === 'one') {
        this.zoom = 1
        this.rotate = 0
        this.imgStyle = {
          transform: `scale(${this.zoom}) rotate(${this.rotate}deg)`,
          transition: 'all .3s'
        }
      }
    },
    // 图片加载
    _imgLoad(src, callback) {
      const image = new Image()
      image.onload = function() {
        callback(src)
      }
      image.src = src
    },
    // 底部缩略图滚动事件处理
    scrollAnimate() {
      const dom = jQuery('.viewer-navbar')
      const infoW = dom.get(0).scrollWidth // 容器viewer-navbar的内容宽度
      const viewW = dom.width() // 容器viewer-navbar的可视宽度
      const viewL = dom.scrollLeft() // 容器viewer-navbar的left偏移
      const currL = jQuery('.viewer-li-' + this.indexDefault).offset().left // 当前目标的left偏移
      const left = 640
      const min = Math.min(viewL + currL - left, infoW - viewW)
      const move = Math.max(0, min)
      dom.animate({'scrollLeft': move})
    },
    // 关闭按钮点击
    _closeClick() {
      this.close()
    }
  },
  computed: {},
  mounted() {
  }
}
</script>
